<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body
  >
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, i) in protTagOptions"
        :label="item.title"
        :name="item.title"
        :key="i"
      >
        <el-tag
          v-for="(selectItem, index) in item.list"
          :key="index"
          :effect="tagEffect(selectItem.text)"
          @click="toggleSelectTag(selectItem.text)"
          style="margin: 0 10px 10px 0; width: 100px; text-align: center; cursor:pointer"
        >{{ selectItem.text }}</el-tag>
      </el-tab-pane>
    </el-tabs>
    <div class="d-flex ai-center" style="margin-top: 30px; min-height: 30px">
      <div style="margin-right: 20px;">已选择标签:</div>
      <el-tag
        v-for="(selectItem, index) in portTags"
        :key="index"
        effect="dark"
        closable
        @close="handleRemove(selectItem)"
        style="margin: 0 10px 0 0; width: 100px; text-align: center; cursor:pointer"
      >{{ selectItem }}</el-tag>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: "",
    protTagOptions: {
      type: Array
    },
    portTags: {
      type: Array
    },
    dialogVisible: false,
  },
  data() {
    return {
      activeName: "小区",
    };
  },
  computed: {
    tagEffect() {
      return (v) => {
        return this.portTags.includes(v) ? "dark" : "plain";
      };
    },
  },
  methods: {
    toggleSelectTag(v) {
      let i = this.portTags.indexOf(v);
      if (i > -1) {
        this.portTags.splice(i, 1);
        this.$emit("update:portTags", this.portTags);
      } else {
        if (this.portTags.length >= 3)
          return this.$message.error("最多支持3个标签");

        this.portTags.push(v);
        this.$emit("update:portTags", this.portTags);
      }
    },

    handleClose() {
      this.$emit('update:dialogVisible', false)
    },

    handleRemove(v) {
      let i = this.portTags.indexOf(v);
      this.portTags.splice(i, 1);
      this.$emit("update:portTags", this.portTags);
    },
  },
};
</script>

<style scoped>
>>> .el-dialog__body{
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>